<template>
	<div >
		<div >
			<p style="margin-top: 20px;margin-left: 40px;font-size: 20px">商品详情</p>
			<div >
				<el-form :model="list" label-width="80px">
					<el-form-item label="商品名称">
						<el-input disabled placeholder="请输入商品名称" v-model="list.name"></el-input>
					</el-form-item>
					<el-form-item label="商品描述">
						<el-input disabled placeholder="请输入商品描述" v-model="list.subtitle"></el-input>
					</el-form-item>
					<el-form-item label="当前状态">
						<el-input disabled placeholder="请输入商品描述" v-if="list.status==1" value="在售"></el-input>
						<el-input disabled placeholder="请输入商品描述" v-if="list.status==2" value="下架"></el-input>
					</el-form-item>
					<el-form-item label="所属分类">
						<el-select v-model="list.region" placeholder="请选择一级品类">
							<el-option
									v-for="(item,index) in options"
									:key="index"
									:label="item.name"
									:value="item.name"
							></el-option>
						</el-select>`
					</el-form-item>
					<el-form-item label="商品价格">
						<el-input disabled class="inp" placeholder="价格" v-model="list.price">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
					<el-form-item label="商品库存">
						<!-- stock -->
						<el-input disabled class="inp" placeholder="库存" v-model="list.stock">
							<template slot="append">件</template>
						</el-input>
					</el-form-item>
					<el-form-item label="商品图片">
						<img class="image" v-if="list.mainImage" :src="list.imageHost+list.mainImage" alt srcset />
						<img
								class="image"
								v-else
								src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113118119&di=d3fbabb647a1691ced3e6ae869b293a3&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D30305038%2C711507037%26fm%3D214%26gp%3D0.jpg"
								alt
								srcset
						/>
					</el-form-item>
					<el-form-item label="商品详情">
						<p v-html="list.detail"></p>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {GoodList,
		Goods
	} from "../../api/index.js";
	export default {
		name: "goodlist",
		data(){
			return{
				ruleForm: "",
				input:"",
				list:{},
				value:"",
				categoryId:0,
				options:[]
			}
		},
		mounted() {
			this.Goodlist();
			this.Goods();
		},
		methods:{
			async Goodlist(){
				const res =await GoodList(this.$route.query.id)
				console.log(res)
				this.list=res.data
			},
			Goods(){
				Goods(this.categoryId).then(res=>{
					console.log(res);
					this.options=res.data
				})
			}
		}
	}
</script>

<style scoped>

</style>
